<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/CNhuazhu/Image/avatar.jpg">

<link rel="stylesheet" href="/next/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"cnhuazhu.gitee.io","root":"/next/","images":"/next/images","scheme":"Mist","version":"8.6.1","exturl":false,"sidebar":{"position":"left","Muse | Mist":320,"display":"post","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":true,"mediumzoom":true,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/next/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/next/js/config.js"></script>
<meta name="description" content="本文将介绍Webpack的使用">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue学习-Webpack">
<meta property="og:url" content="https://cnhuazhu.gitee.io/next/2021/08/08/Vue/Vue%E5%AD%A6%E4%B9%A0-Webpack/index.html">
<meta property="og:site_name" content="花猪のBlog">
<meta property="og:description" content="本文将介绍Webpack的使用">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-基础-目录结构.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-基础-打包.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-css.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-less.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic1.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic2gai.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic3.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic4.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic5.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic6.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic7.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic8.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/Vue%E7%BB%84%E4%BB%B6%E5%8C%96-webpack-pic9.gif">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-bable1.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-bable2.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-%E5%AF%BC%E5%85%A51.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-%E5%AF%BC%E5%85%A52.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-组件化1.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-组件化2.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-组件化3.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-plugin-banner.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-plugin-html1.png">
<meta property="og:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-plugin-html2.png">
<meta property="article:published_time" content="2021-08-08T09:30:08.000Z">
<meta property="article:modified_time" content="2021-08-20T14:13:29.394Z">
<meta property="article:author" content="花猪">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-基础-目录结构.png">


<link rel="canonical" href="https://cnhuazhu.gitee.io/next/2021/08/08/Vue/Vue%E5%AD%A6%E4%B9%A0-Webpack/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://cnhuazhu.gitee.io/next/2021/08/08/Vue/Vue%E5%AD%A6%E4%B9%A0-Webpack/","path":"2021/08/08/Vue/Vue学习-Webpack/","title":"Vue学习-Webpack"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Vue学习-Webpack | 花猪のBlog</title>
  




  <noscript>
    <link rel="stylesheet" href="/next/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/next/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">花猪のBlog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-主站"><a href="https://cnhuazhu.top/" rel="noopener" target="_blank"><i class="fas fa-chevron-right fa-fw"></i>主站</a></li>
        <li class="menu-item menu-item-home"><a href="/next/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-tags"><a href="/next/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">14</span></a></li>
        <li class="menu-item menu-item-categories"><a href="/next/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">8</span></a></li>
        <li class="menu-item menu-item-archives"><a href="/next/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">53</span></a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Webpack"><span class="nav-number">2.</span> <span class="nav-text">Webpack</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8B%E7%BB%8D"><span class="nav-number">2.1.</span> <span class="nav-text">介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Webpack%E7%9A%84%E5%AE%89%E8%A3%85"><span class="nav-number">2.2.</span> <span class="nav-text">Webpack的安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%89%8D%E6%9C%9F%E5%87%86%E5%A4%87"><span class="nav-number">2.3.</span> <span class="nav-text">前期准备</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="nav-number">2.4.</span> <span class="nav-text">基本使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE"><span class="nav-number">2.5.</span> <span class="nav-text">配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-config-js"><span class="nav-number">2.5.1.</span> <span class="nav-text">webpack.config.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#package-json"><span class="nav-number">2.5.2.</span> <span class="nav-text">package.json</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%AC%E5%9C%B0webpack"><span class="nav-number">2.5.3.</span> <span class="nav-text">本地webpack</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#loader%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-number">2.6.</span> <span class="nav-text">loader的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#css%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-number">2.6.1.</span> <span class="nav-text">css文件处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#less%E3%80%81scss%E3%80%81stylus%E7%AD%89%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-number">2.6.2.</span> <span class="nav-text">less、scss、stylus等文件处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-number">2.6.3.</span> <span class="nav-text">图片文件处理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C"><span class="nav-number">2.6.3.1.</span> <span class="nav-text">操作</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%9B%BE%E7%89%87%E7%9A%84%E5%91%BD%E5%90%8D"><span class="nav-number">2.6.3.2.</span> <span class="nav-text">图片的命名</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ES6%E8%AF%AD%E6%B3%95%E5%A4%84%E7%90%86"><span class="nav-number">2.6.4.</span> <span class="nav-text">ES6语法处理</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%95%E5%85%A5Vue-js"><span class="nav-number">2.7.</span> <span class="nav-text">引入Vue.js</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-1"><span class="nav-number">2.7.1.</span> <span class="nav-text">基本使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#el%E5%92%8Ctemplate"><span class="nav-number">2.7.2.</span> <span class="nav-text">el和template</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%95%E5%85%A5"><span class="nav-number">2.8.</span> <span class="nav-text">Vue组件化引入</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Plugin%E4%BD%BF%E7%94%A8"><span class="nav-number">2.9.</span> <span class="nav-text">Plugin使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#BannerPlugin"><span class="nav-number">2.9.1.</span> <span class="nav-text">BannerPlugin</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html-webpack-plugin"><span class="nav-number">2.9.2.</span> <span class="nav-text">html-webpack-plugin</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#uglifyjs-webpack-plugin"><span class="nav-number">2.9.3.</span> <span class="nav-text">uglifyjs-webpack-plugin</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%90%AD%E5%BB%BA%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="nav-number">2.10.</span> <span class="nav-text">搭建本地服务器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E5%88%86%E7%A6%BB"><span class="nav-number">2.11.</span> <span class="nav-text">配置文件的分离</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%8E%E8%AE%B0"><span class="nav-number">3.</span> <span class="nav-text">后记</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="花猪"
      src="https://cdn.jsdelivr.net/gh/CNhuazhu/Image/avatar.jpg">
  <p class="site-author-name" itemprop="name">花猪</p>
  <div class="site-description" itemprop="description">为了获得不同的阅读体验，建立此分站。<br>（可在导航栏搜索想要查看的文章）<br><br>本站主题：NEXT 8.6.1</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/next/archives/">
        
          <span class="site-state-item-count">53</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/next/categories/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/next/tags/">
          
        <span class="site-state-item-count">14</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/CNhuazhu" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;CNhuazhu" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



          </div>
        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/CNhuazhu" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://cnhuazhu.gitee.io/next/2021/08/08/Vue/Vue%E5%AD%A6%E4%B9%A0-Webpack/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://cdn.jsdelivr.net/gh/CNhuazhu/Image/avatar.jpg">
      <meta itemprop="name" content="花猪">
      <meta itemprop="description" content="为了获得不同的阅读体验，建立此分站。<br>（可在导航栏搜索想要查看的文章）<br><br>本站主题：NEXT 8.6.1">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="花猪のBlog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Vue学习-Webpack
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-08-08 17:30:08" itemprop="dateCreated datePublished" datetime="2021-08-08T17:30:08+08:00">2021-08-08</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-08-20 22:13:29" itemprop="dateModified" datetime="2021-08-20T22:13:29+08:00">2021-08-20</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/next/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">学习笔记</span></a>
        </span>
    </span>

  
    <span id="/next/2021/08/08/Vue/Vue%E5%AD%A6%E4%B9%A0-Webpack/" class="post-meta-item leancloud_visitors" data-flag-title="Vue学习-Webpack" title="阅读次数">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span class="leancloud-visitors-count"></span>
    </span>
    <span id="/next/2021/08/08/Vue/Vue%E5%AD%A6%E4%B9%A0-Webpack/" class="post-meta-item twikoo_visitors" data-flag-title="Vue学习-Webpack" title="阅读次数">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span id="twikoo_visitors"></span>
    </span>
  
      </div>
      <div class="post-meta">
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>16k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>15 分钟</span>
    </span>
</div>

            <div class="post-description">本文将介绍Webpack的使用</div>
        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>本文将介绍Webpack的使用。</p>
<hr>
<h1 id="Webpack"><a href="#Webpack" class="headerlink" title="Webpack"></a>Webpack</h1><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。</p>
<p>目前使用前端模块化的方案有：AMD、CMD、CommonJS、ES6</p>
<p>浏览器可以直接处理的模块化方式只有ES6，如果想使用其他模块化方式，并且需要处理模块间（JavaScript、CSS、图片、json文件等都可以被当作模块）的各种依赖，最后进行整合打包。Webpack可以帮助完成这一系列工作。</p>
<blockquote>
<p>Webpack在打包的过程中，会对资源进行处理，比如：压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等操作。</p>
</blockquote>
<h2 id="Webpack的安装"><a href="#Webpack的安装" class="headerlink" title="Webpack的安装"></a>Webpack的安装</h2><p>Webpack依赖于Node环境，因此需要先安装Node.js（这里不做说明）。</p>
<p>开启终端，使用如下命令安装：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack -g</span><br></pre></td></tr></table></figure>

<p><code>-g</code>表示全局安装，此外还可以指定版本号：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack@3.6.0 -g</span><br></pre></td></tr></table></figure>

<p>局部安装：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack --save-dev</span><br></pre></td></tr></table></figure>

<blockquote>
<ul>
<li>在终端直接执行webpack命令，使用的全局安装的webpack</li>
<li>当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack</li>
<li>通常会指定版本号</li>
</ul>
</blockquote>
<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><p>项目目录结构（如下图）：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-基础-目录结构.png" style="zoom:80%;" />

<ul>
<li><code>dist</code>文件夹：用于存放打包文件</li>
<li><code>src</code>文件夹：用于存放编写的源文件<ul>
<li><code>main.js</code>：项目的入口文件</li>
<li><code>mathUtils.js</code>：定义了一些数学工具函数，可以在其他地方引用，并且使用</li>
</ul>
</li>
<li><code>index.html</code>：浏览器打开展示的首页html</li>
<li><code>package.json</code>：通过<code>npm init</code>生成，npm包管理的文件</li>
</ul>
<h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><p>下面使用CommonJS模块化方式编写一组代码，并用Webpack打包</p>
<p>首先在<code>mathUtils.js</code>编写两个数学函数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//加法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">num1, num2</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num1 + num2</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//乘法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mul</span>(<span class="params">num1, num2</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num1 * num2</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//导出</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  add,</span><br><span class="line">  mul</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>然后在<code>main.js</code>中导入并使用：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用commonjs的模块化规范</span></span><br><span class="line"><span class="keyword">const</span> &#123;add, mul&#125; = <span class="built_in">require</span>(<span class="string">&#x27;./mathUtils.js&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">20</span>, <span class="number">30</span>));</span><br><span class="line"><span class="built_in">console</span>.log(mul(<span class="number">20</span>, <span class="number">30</span>));</span><br></pre></td></tr></table></figure>

<p>由于使用的是commonjs的模块化规范，因此不能直接放入<code>index.html</code>中使用，这时就需要Webpack打包。打开终端，进入项目路径，键入如下命令：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack .\src\main.js .\dist\bundle.js</span><br></pre></td></tr></table></figure>

<blockquote>
<p>命令指明了入口文件和输出的文件名（后面会配置文件，简化打包的命令）。</p>
</blockquote>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-基础-打包.png" style="zoom:80%;" />

<p>于是在<code>dist</code>目录下生成了<code>bundle.js</code>文件，可以在<code>index.html</code>中使用：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--index.html--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./dist/bundle.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>此外，后续项目中会用到Node的一些包，所以要在终端中键入如下命令：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>

<p>之后会输入一些项目的信息，完成后会在项目路径下生成<code>package.json</code>文件。</p>
<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><p>在实际项目中一般不会直接用到<code>webpack</code>命令，这样会直接找全局的webpack，然而不同的项目可能会用到不同的版本，因此在使用的时候一般会在项目中下载一个本地的webpack（版本号与项目中的一致，否则不同版本有可能会报错）。因此就需要配置一些文件。</p>
<h3 id="webpack-config-js"><a href="#webpack-config-js" class="headerlink" title="webpack.config.js"></a>webpack.config.js</h3><p>手动创建<code>webpack.config.js</code>文件：</p>
<p>利用webpack打包的时候在命令中需要指明入口以及输出文件名，这里会在<code>webpack.config.js</code>文件中做映射，以简化命令：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<ul>
<li><code>const path = require(&#39;path&#39;)</code>是利用了node中的函数，用来获取项目路径</li>
<li><code>entry</code>：设置了项目打包的入口</li>
<li><code>output</code>：为一个对象类型。<code>path</code>参数利用<code>path.resolve(__dirname, &#39;dist&#39;)</code>指明了打包的输出路径（项目的绝对路径（<code>__dirname</code>）关联自定义路径<code>dist</code>）。<code>output</code>规定必须使用绝对路径</li>
<li><code>filename</code>：指明了打包的输出文件</li>
<li>由此在终端键入<code>webpack</code>命令（无需指定入口文件和输出的文件名）即可进行项目源码的打包</li>
</ul>
</blockquote>
<h3 id="package-json"><a href="#package-json" class="headerlink" title="package.json"></a>package.json</h3><p>在终端键入命令<code>npm init</code>得到<code>package.json</code>文件：</p>
<p>其中的<code>scripts</code>参数及为终端命令<code>npm run xxx</code>的映射。</p>
<p>比如在其中设置<code>&quot;build&quot;: &quot;webpack&quot;</code>关联数据：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;test&quot;</span>: <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;build&quot;</span>: <span class="string">&quot;webpack&quot;</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>即在终端键入<code>npm run build</code>就可以执行<code>webpack</code>命令（会优先寻找本地webpack）。</p>
<blockquote>
<p>之后都是使用<code>npm run xxx</code>格式的命令。</p>
</blockquote>
<h3 id="本地webpack"><a href="#本地webpack" class="headerlink" title="本地webpack"></a>本地webpack</h3><p>在实际项目中通常会在项目根路径下下载本地webpack，其版本号应该同项目一致（否则会出错）。</p>
<p>打开终端，进入项目目录，键入如下命令：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack@版本号 --save-dev</span><br></pre></td></tr></table></figure>

<p>然后就会在项目的根目录下生成<code>node_modules</code>文件夹，里面是webpack的一些包。</p>
<p>在<code>package.json</code>文件中会自动生成<code>devDependencies</code>参数，里面是下载的webpack的版本号。</p>
<h2 id="loader的使用"><a href="#loader的使用" class="headerlink" title="loader的使用"></a>loader的使用</h2><p>loader是webpack中一个非常核心的概念。</p>
<p>在实际项目开发中不仅有js代码的处理，还需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。然而对于webpackp本身的能力来说，对于这些转化是不支持的。</p>
<p>但是可以通过给webpack扩展对应的loader去实现。</p>
<p>loader的使用步骤：</p>
<ol>
<li><p>通过npm安装需要使用的loader</p>
<blockquote>
<p>官网：<a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/">loaders | webpack 中文网 (webpackjs.com)</a></p>
</blockquote>
</li>
<li><p>在<code>webpack.config.js</code>中的<code>module</code>关键字下进行配置</p>
</li>
</ol>
<h3 id="css文件处理"><a href="#css文件处理" class="headerlink" title="css文件处理"></a>css文件处理</h3><p>需要同时配置<a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/css-loader"><code>css-loader</code></a> 和<a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/style-loader"><code>style-loader</code></a></p>
<p>假设在项目的根路径下创建一个名为<code>css</code>的文件夹，里面新建一个名为<code>normal.css</code>的文件。</p>
<p>要想使用该css样式，首先需要在<code>main.js</code>（打包的入口文件）中引用：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">&#x27;./css/normal.css&#x27;</span>)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意： require是Commonjs的引入规范。</p>
</blockquote>
<p>接下来需要打开终端，到项目的根路径下，按照官网的命令键入：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev css-loader</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install style-loader --save-dev</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：</p>
<ul>
<li><p>只下载<code>css-loader</code>仅可以实现打包时对css文件的引用，但是具体的效果展示，还需要下载<code>style-loader</code></p>
</li>
<li><p>同样的，在下载的时候也可以在指定版本号，格式：<code>xxx-loader@版本号</code>，以2.0.2版本的<code>css-loader</code>为例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev css-loader@2.0.2</span><br></pre></td></tr></table></figure></li>
<li><p>键入命令，下载完成后，同样地会在<code>package.json</code>的<code>devDependencies</code>关键词下自动生成下载的依赖以及版本号</p>
</li>
</ul>
</blockquote>
<p>接下来需要手动在<code>webpack.config.js</code>中的<code>module</code>关键字下进行配置，官网会给出详细的配置：</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-css.png"></p>
<p>把<code>rules</code>的部分粘贴到配置文件的相应位置即可。</p>
<blockquote>
<p>注意：</p>
<p>use列表的读取顺序是自右向左，正常顺序是先加载<code>css-loader</code>，后加载<code>style-loader</code>，这一顺序不可颠倒。</p>
</blockquote>
<p>最后就可以通过命令打包css文件了。</p>
<h3 id="less、scss、stylus等文件处理"><a href="#less、scss、stylus等文件处理" class="headerlink" title="less、scss、stylus等文件处理"></a>less、scss、stylus等文件处理</h3><p>步骤同上一个css文件处理类似，只不过这里额外说明一点：在官网中的use列表中可以看到loader元素还可以为对象属性，以便于后面添加各种options选项。当然按照上面的方法（直接写<code>xxx-loader</code>）也是可以的。</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-less.png"></p>
<h3 id="图片文件处理"><a href="#图片文件处理" class="headerlink" title="图片文件处理"></a>图片文件处理</h3><h4 id="操作"><a href="#操作" class="headerlink" title="操作"></a>操作</h4><blockquote>
<p>注意：图片文件的处理依然要用到<code>css-loader</code>和<code>style-loader</code>。</p>
</blockquote>
<p>前期准备：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic1.png" style="zoom:80%;" />

<p>如上图，在src文件夹下分别创建<code>css</code>和<code>img</code>文件夹，其中<code>css</code>文件夹中创建一个名为<code>normal.css</code>的文件，里面是对图片的引用。img文件下有两张图片，其中<code>pic3k.jpg</code>图片大小为3kb，<code>pic15k.jpg</code>图片大小为15kb。</p>
<p><code>normal.css</code>的代码如下（先引用<code>pic3k.jpg</code>）：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/pic3k.jpg&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>main.js</code>引用<code>normal.css</code>文件：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">&#x27;./css/normal.css&#x27;</span>)</span><br></pre></td></tr></table></figure>
</blockquote>
<p>根据官网，在终端键入如下命令下载<a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/url-loader"><code>url-loader</code></a>（注意版本号）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev url-loader</span><br></pre></td></tr></table></figure>

<p>在<code>webpack.config.js</code>文件中手动配置规则</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic2gai.png" style="zoom:80%;" />

<blockquote>
<p>其中：</p>
<ul>
<li><code>test</code>可以配置图片后缀名</li>
<li><code>limit</code>为图片大小（默认为8kb（8192bit））</li>
</ul>
</blockquote>
<p>然后运行webpack打包，就可以看到效果（如下图）</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic3.png"></p>
<p>查看背景图片样式可以看到，图片被自动转化为了base64编码的字符串，在打包文件夹内并未有图片<code>pic3k.jpg</code>，查看出口文件<code>bundle.js</code>可以看到该图片的base64编码。</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic4.png"></p>
<p>当然上述图片转化的情况仅限于图片文件大小小于设定值（8kb），如果引入较大的图片效果则不一样。</p>
<p>如下代码所示，这次引入的图片大小为15kb（大于设定值大小）</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;../img/pic15k.jpg&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>再次运行webpack打包，可以看到报错信息：找不到<code>file-loader</code></p>
<blockquote>
<ul>
<li>当加载的图片, 小于设置大小时, 会将图片编译成base64字符串形式</li>
<li>当加载的图片, 大于设置大小时, 需要使用<code>file-loader</code>模块进行加载</li>
</ul>
</blockquote>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic5.png"></p>
<p>于是我们需要查看官网，在终端键入如下命令引入<a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/file-loader"><code>file-loader</code></a>（注意版本号）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev file-loader</span><br></pre></td></tr></table></figure>

<p>在<code>webpack.config.js</code>文件中手动配置规则：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic6.png" style="zoom:80%;" />

<blockquote>
<p>注意：这里的配置可以省略。</p>
</blockquote>
<p>然后运行webpack打包，执行成功。但是打开<code>index.html</code>，会发现并没有载入图片，查看后发现报错信息：图片找不到。</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic7.png"></p>
<p>实际上，一旦图片大小超出设置格式，就不会转换为base64编码格式，可以在打包输出文件夹看到一个以hash编码命名（避免命名重复）的图片文件，即要引入的图片：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-pic8.png" style="zoom:80%;" />

<p>实际上不加以设置，<code>index.html</code>引用的图片路径为同级目录（项目根目录），但是打包后的图片在输出文件夹<code>dist</code>中，自然无法找到，因此需要设置访问图片图片的路径。</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/Vue%E7%BB%84%E4%BB%B6%E5%8C%96-webpack-pic9.gif"></p>
<p>在<code>webpack.config.js</code>文件中的<code>output</code>项添加<code>publicPath</code>属性，内容为打包输出目录（这里的输出目录为<code>dist</code>）：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">output: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">    <span class="attr">publicPath</span>: <span class="string">&#x27;dist/&#x27;</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>最后再重新打包，成功。</p>
<blockquote>
<p>注意：</p>
<p>当然这只是在测试阶段添加的属性。一般在项目移植的时候会将<code>index.html</code>文件也移至打包输出文件夹中，这时图片的就同<code>index.html</code>文件在同一目录下，自然就需要将<code>publicPath</code>删除。</p>
</blockquote>
<h4 id="图片的命名"><a href="#图片的命名" class="headerlink" title="图片的命名"></a>图片的命名</h4><p>默认打包后图片命名为32为的hash值（为了避免命名重复），但实际上在图片数量很多的时候我们希望能通过图片文件的命名一眼看出是哪一张，方便测试、维护。此外如果所有的图片都堆到输出文件夹（无子文件夹）会显得很乱，也不方便后期的维护。所以需要对图片进行命名和路径的规范。</p>
<p>在在<code>webpack.config.js</code>文件中的<code>url-loader</code>的<code>rules</code>规范中，在<code>options</code>中添加<code>name</code>属性：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif|jpeg)$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            <span class="attr">options</span>: &#123;</span><br><span class="line">              <span class="attr">limit</span>: <span class="number">8192</span>,</span><br><span class="line">              <span class="attr">name</span>: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<ul>
<li><code>img/</code>：图片文件会存放在输出目录下的<code>img</code>文件夹中</li>
<li><code>[name].[hash:8].[ext]</code>：文件的命名规范，表示<code>原文件名.8位hash值.原文件扩展名</code></li>
</ul>
</blockquote>
<h3 id="ES6语法处理"><a href="#ES6语法处理" class="headerlink" title="ES6语法处理"></a>ES6语法处理</h3><p>在之前webpack打包的时候，用到的都是ES6的语法，为了获得更好的兼容性，有时需要ES5的语法（某些浏览器并不支持ES6），因此需要对其进行处理。</p>
<p>在官网下载<a target="_blank" rel="noopener" href="https://www.webpackjs.com/loaders/babel-loader/"><code>babel-loader</code></a> ，由于已经有webpack，因此只需要下载：</p>
<ul>
<li><p><code>babel-loader</code></p>
</li>
<li><p><code>babel-core</code></p>
</li>
<li><p><code>babel-preset-es2015</code></p>
<blockquote>
<p>说明：官网下载的是<code>babel-preset-env</code>，它会寻找<code>.babelrc</code>文件（需要配置），这里暂时只需要es6相关的服务，因此下载<code>babel-preset-es2015</code>（同样注意指定版本）</p>
</blockquote>
</li>
</ul>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-bable1.png" style="zoom:80%;" />

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev babel-loader babel-core babel-preset-es2015</span><br></pre></td></tr></table></figure>

<p>在<code>webpack.config.js</code>文件中添加配置项：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-loader-bable2.png" style="zoom:80%;" />

<p>注意<code>presets</code>中指定的应该为<code>&#39;es2015&#39;</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        exclude: <span class="regexp">/(node_modules|bower_components)/</span>,</span><br><span class="line">        use: &#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          <span class="attr">options</span>: &#123;</span><br><span class="line">            <span class="attr">presets</span>: [<span class="string">&#x27;es2015&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：<code>exclude</code>配置项指打包时不包含<code>node_modules</code>和<code>bower_components</code>文件夹下的内容。</p>
</blockquote>
<p>执行webpack打包，会发现打包文件中均为ES5的语法。</p>
<h2 id="引入Vue-js"><a href="#引入Vue-js" class="headerlink" title="引入Vue.js"></a>引入Vue.js</h2><h3 id="基本使用-1"><a href="#基本使用-1" class="headerlink" title="基本使用"></a>基本使用</h3><p>下面来介绍在webpack环境中集成Vue.js。</p>
<p>只需进入项目根目录，在终端键入如下命令：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<ul>
<li>因为后续在实际项目中也会使用vue的，所以并不是开发时依赖，因此没有<code>-dev</code></li>
<li>可以指定版本</li>
</ul>
</blockquote>
<p>然后在<code>index.html</code>写入Vue实例（模板）：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;cpn&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>接下来在<code>main.js</code>文件中引入Vue并创建Vue对象：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vue = <span class="keyword">new</span> Vue (&#123;</span><br><span class="line">  <span class="attr">el</span>: <span class="string">&#x27;#cpn&#x27;</span>,</span><br><span class="line">  <span class="attr">data</span>: &#123;</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&#x27;Hello Webpack&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<p>实际上下载的Vue源码中其导出为：<code>export default Vue;</code>，因此直接使用<code>import Vue from &quot;vue&quot;;</code>导入语句即可。</p>
</blockquote>
<p>最后webpack打包，执行，打包过程并未有误，但是在实际<code>index.html</code>现实中会出现如下报错信息：</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-%E5%AF%BC%E5%85%A51.png"></p>
<blockquote>
<p>说明：这里涉及到<a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A">Vue不同版本构建</a></p>
<ul>
<li><p><code>runtime-only</code>：代码中，不可以有任何的template</p>
<blockquote>
<p>在之前<code>index.html</code>文件里编写的<code>&lt;div&gt;</code>标签就是Vue实例的template</p>
</blockquote>
</li>
<li><p><code>runtime-compiler</code>：代码中，可以有template，因为有compiler可以编译template</p>
</li>
</ul>
<p>现在的错误信息是使用了<code>runtime-only</code>，但是却想编译template，显然是不可以的。</p>
</blockquote>
<p>解决方案：</p>
<p>在<code>webpack.config.js</code>文件中添加<code>resolve</code>配置信息：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">resolve</span>: &#123;</span><br><span class="line">    <span class="attr">alias</span>: &#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>: <span class="string">&#x27;vue/dist/vue.esm.js&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>使得每次在使用vue的时候会查找指定的文件</p>
<p>（默认情况下使用的是<code>vue/dist/vue.runtime.js</code>）</p>
</blockquote>
<p>重新webpack打包，成功显示。</p>
<h3 id="el和template"><a href="#el和template" class="headerlink" title="el和template"></a>el和template</h3><p>后期在重新调整显示样式时候，需要重新修改<code>index.html</code>文件中定义的模板，但是在之后的开发中，并不希望手动频繁的去修改html模板，因此在创建Vue对象时，可以定义<code>template</code>属性：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue (&#123;</span><br><span class="line">  <span class="attr">el</span>: <span class="string">&#x27;#cpn&#x27;</span>,</span><br><span class="line">  <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">  &lt;div&gt;</span></span><br><span class="line"><span class="string">    &lt;h2&gt;&#123;&#123;message&#125;&#125;&lt;/h2&gt;</span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string">  `</span>,</span><br><span class="line">  <span class="attr">data</span>: &#123;</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&#x27;Hello Webpack&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：一般在使用的时候可以省略Vue对象的命名，可以直接new。</p>
</blockquote>
<p>在前端<code>index.html</code>代码中直接写<code>&lt;div&gt;</code>标签即可：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;cpn&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>在vue对象中的<code>el</code>属性用于绑定相应的标签，在打包的时候，vue会将<code>template</code>的内容自动替换至前端绑定的标签上。</p>
<p>使用webpack打包后，运行查看：</p>
<p><img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-%E5%AF%BC%E5%85%A52.png"></p>
<h2 id="Vue组件化引入"><a href="#Vue组件化引入" class="headerlink" title="Vue组件化引入"></a>Vue组件化引入</h2><p>下面来介绍Vue组件化的引入，会把模板等单独抽离，使得项目结构看起来更为清晰。</p>
<p>首先在<code>index.html</code>文件中新建一个id为app的<code>&lt;div&gt;</code>标签，作为Vue实例</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>然后在<code>src</code>路径下新建一个名为<code>vue</code>的文件夹，用于存放vue文件</p>
<p>在其中新建一个名为<code>App.vue</code>的文件：</p>
<p>如果使用<code>WebStorm</code>编辑器，可以在新建文件中找到Vue类型：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-组件化1.png" style="zoom:80%;" />

<p>点击创建后会自动生成如下模板：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-组件化2.png" style="zoom:80%;" />

<blockquote>
<p>说明：</p>
<ul>
<li><p><code>&lt;template&gt;</code>：用于书写模板</p>
</li>
<li><p><code>&lt;script&gt;</code>：用于创建Vue对象，并通过<code>export default</code>默认导出</p>
</li>
<li><p><code>&lt;style&gt;</code>：可编写css代码</p>
<p><code>style</code>标签默认有<code>scoped</code>属性：该属性是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。</p>
</li>
</ul>
</blockquote>
<p>为了更好的体现模块化的思想，我们再创建一个名为<code>Cpn.vue</code>的文件，为子组件。写入以下内容：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;cpnTitle&quot;</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">name</span>: <span class="string">&quot;Cpn&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">name</span>: <span class="string">&quot;Cpn&quot;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">title</span>: <span class="string">&quot;我是cpn子组件的标题&quot;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">message</span>: <span class="string">&quot;我是cpn子组件的内容&quot;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-class">.cpnTitle</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">color</span>: green;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>在<code>App.vue</code>中写入以下内容：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;appTitle&quot;</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;btnClick&quot;</span>&gt;</span>点击弹框<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Cpn</span>/&gt;</span>  <span class="comment">&lt;!--子组件--&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//导入子组件</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> Cpn <span class="keyword">from</span> <span class="string">&#x27;./Cpn.vue&#x27;</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">name</span>: <span class="string">&quot;App&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">Cpn</span>: Cpn  <span class="comment">//注册子组件</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">name</span>: <span class="string">&#x27;App&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">title</span>: <span class="string">&#x27;我是app父组件的标题&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">message</span>: <span class="string">&#x27;我是app父组件的内容&#x27;</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">btnClick</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;app父组件按钮&#x27;</span>)</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-class">.appTitle</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">color</span>: brown;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<p>在<code>&lt;script&gt;</code>用<code>import Cpn from &#39;./Cpn.vue&#39;</code>导入子组件，并在<code>components</code>中进行注册。</p>
</blockquote>
<p>在<code>main.js</code>中写入以下内容：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./vue/App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  <span class="attr">template</span>: <span class="string">&#x27;&lt;App/&gt;&#x27;</span>,</span><br><span class="line">  <span class="attr">components</span>: &#123;</span><br><span class="line">    <span class="attr">App</span>: App</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<ul>
<li><p>在引入App.vue时可以省略扩展名，只需要在<code>webpack.config.js</code>文件中的<code>resolve</code>关键词中添加<code>extensions</code>配置（<code>.[ext]</code>表示可以在引入时省略的扩展名）：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">resolve: &#123;</span><br><span class="line">    <span class="attr">extensions</span>: [<span class="string">&#x27;.js&#x27;</span>, <span class="string">&#x27;.css&#x27;</span>, <span class="string">&#x27;.vue&#x27;</span>],</span><br><span class="line">    <span class="attr">alias</span>: &#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>: <span class="string">&#x27;vue/dist/vue.esm.js&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li>
<li><p><code>template</code>可以直接写标签以引用模板</p>
</li>
</ul>
</blockquote>
<p>这时vue组件在打包时还不能够被正确的解析加载，需要下载<code>vue-loader</code>和<code>vue-template-compiler</code>：<a target="_blank" rel="noopener" href="https://vue-loader.vuejs.org/zh/#vue-loader-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F">介绍 | Vue Loader (vuejs.org)</a></p>
<p>在终端键入如下命令（注意版本号）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-loader vue-template-compiler --save-dev</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：下载后在最后webpack打包的时候可能出现错误。</p>
<p>解决方案：</p>
<ul>
<li>在vue-loader14版本之后开始需要配置额外的插件</li>
<li>尝试使用较低的版本（可以尝试使用13的版本）</li>
</ul>
</blockquote>
<p>在<code>webpack.config.js</code>文件中配置信息：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use: [<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure>

<p>最后webpack打包，运行得到展示效果。</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-vue-组件化3.png" style="zoom:80%;" />

<h2 id="Plugin使用"><a href="#Plugin使用" class="headerlink" title="Plugin使用"></a>Plugin使用</h2><p>webpack中的插件，就是对webpack现有功能的各种扩展。</p>
<p>使用步骤：</p>
<ol>
<li><p>通过npm安装需要使用的plugins</p>
<blockquote>
<p>某些webpack已经内置的插件不需要安装</p>
</blockquote>
</li>
<li><p>在<code>webpack.config.js</code>中的plugins中配置插件</p>
</li>
</ol>
<h3 id="BannerPlugin"><a href="#BannerPlugin" class="headerlink" title="BannerPlugin"></a>BannerPlugin</h3><p><code>BannerPlugin</code>属于webpack自带的插件，用于为打包文件做版权声明。</p>
<p>由于是webpack自带的插件，因此在<code>webpack.config.js</code>文件的首部引入webpack：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>然后在<code>module.exports</code>模块中添加BannerPlugin的配置信息：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  ...,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> webpack.BannerPlugin(<span class="string">&#x27;最终版权归花猪所有&#x27;</span>)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意：plugins为列表。</p>
</blockquote>
<p>重新webpack打包，就可以在输出文件首部看到版权信息：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-plugin-banner.png" style="zoom:80%;" />

<h3 id="html-webpack-plugin"><a href="#html-webpack-plugin" class="headerlink" title="html-webpack-plugin"></a>html-webpack-plugin</h3><p>目前，<code>index.html</code>文件是直接存放在项目根目录下的，但是项目发布时会发布之前设定的输出文件夹<code>dist</code>，所以希望该文件下可以自动生成<code>index.html</code>文件。</p>
<p>首先需要安装该插件，打开终端，进入项目目录，键入如下命令（注意版本号）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install html-webpack-plugin --save-dev</span><br></pre></td></tr></table></figure>

<p>下载完之后可以看到在打包输出文件夹<code>dist</code>中自动生成了<code>index.html</code>文件。</p>
<p>但是有些地方我们还需要做一些修改：</p>
<p>首先在项目根目录下的<code>index.html</code>文件中删去js文件的引入（这个在打包后会自动生成）：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-plugin-html1.png" style="zoom:80%;" />

<p>然后在<code>webpack.config.js</code>文件中的<code>output</code>模块中删除<code>publicPath</code>信息（如果有的话）：</p>
<img src="https://gitee.com/CNhuazhu/tu-chuang1/raw/master/img-blog/WebPack-plugin-html2.png" style="zoom:80%;" />

<p>接着在<code>webpack.config.js</code>文件的首部引入<code>HtmlWebpackPlugin</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>最后在<code>module.exports</code>模块中添加该插件的配置信息：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  ...,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>template</code>：寻找<code>webpack.config.js</code>文件同级目录下的<code>index.html</code>文件作为模板。</p>
</blockquote>
<p>重新webpack打包，就可以看到打包输出文件夹<code>dist</code>中的<code>index.html</code>文件，点击正常运行。</p>
<h3 id="uglifyjs-webpack-plugin"><a href="#uglifyjs-webpack-plugin" class="headerlink" title="uglifyjs-webpack-plugin"></a>uglifyjs-webpack-plugin</h3><p>在打包时，对js文件进行压缩处理（删去注释、空格、换行等），以减少文件大小。</p>
<p>首先安装该插件，打开终端进入项目目录，键入如下命令（注意版本号）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install uglifyjs-webpack-plugin --save-dev</span><br></pre></td></tr></table></figure>

<p>接着在<code>webpack.config.js</code>文件的首部引入<code>UglifyjsWebpackPlugin</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> UglifyjsWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>然后在<code>module.exports</code>模块中添加该插件的配置信息：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  ...,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> UglifyjsWebpackPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>重新webpack打包，就可以看到打包输出文件<code>bundle.js</code>的内容已经被压缩。</p>
<blockquote>
<p>注意：在开发阶段不建议使用此插件，因为在调试的时候会很麻烦，到最终发布时可以使用。</p>
</blockquote>
<h2 id="搭建本地服务器"><a href="#搭建本地服务器" class="headerlink" title="搭建本地服务器"></a>搭建本地服务器</h2><p>之前在调试的时候都需要打包，一旦文件很多的情况下，对于调试来说是非常费时的，所以需要搭建一个本地服务器，类似于热部署，在修改源码之后无需刷新自动更新页面。</p>
<p>webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架。</p>
<p>在使用前需要安装，打开终端，进入项目目录，键入如下命令（注意版本号）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev webpack-dev-server</span><br></pre></td></tr></table></figure>

<p>在<code>webpack.config.js</code>文件的<code>module.exports</code>模块中添加<code>devServer</code>配置信息：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  ...,</span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">contentBase</span>: <span class="string">&#x27;./dist&#x27;</span>,</span><br><span class="line">    <span class="attr">inline</span>: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>可选参数：</p>
<ul>
<li><code>contentBase</code>：为哪一个文件夹提供本地服务，默认是根文件夹</li>
<li><code>port</code>：端口号，默认8080</li>
<li><code>inline</code>：页面实时刷新</li>
<li><code>historyApiFallback</code>：在SPA页面中，依赖HTML5的history模式</li>
</ul>
<p><code>devServer</code>配置信息仅在调试时使用，如果是发布版本，应该抹除。</p>
</blockquote>
<p>在<code>package.json</code>中的<code>scripts</code>模块下添加启动服务命令：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;test&quot;</span>: <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;build&quot;</span>: <span class="string">&quot;webpack&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;dev&quot;</span>: <span class="string">&quot;webpack-dev-server --open&quot;</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<p><code>--open</code>选项使得在启动服务后自动打开浏览器，也可以不添加。</p>
</blockquote>
<p>如此，键入<code>npm run dev</code>便可启动本地服务器，在改动源码时，浏览器会自动刷新。</p>
<h2 id="配置文件的分离"><a href="#配置文件的分离" class="headerlink" title="配置文件的分离"></a>配置文件的分离</h2><p>在之前所有的开发时和发布时依赖的配置都在<code>webpack.config.js</code>文件中进行，这样会需要不停地修改配置文件，比较繁琐。由此希望将开发时和发布时依赖的配置进行分离。</p>
<p>首先下载插件，打开终端，进入项目目录，键入如下命令（注意版本号）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack-merge --save-dev</span><br></pre></td></tr></table></figure>

<p>接下来就是分离配置文件的操作，首先在项目根目录创建一个<code>build</code>的文件夹，用于存放配置文件。接着在其中建立如下三个文件：</p>
<ul>
<li><code>base.config.js</code>：公共配置文件部分</li>
<li><code>dev.config.js</code>：开发时独有的配置文件部分</li>
<li><code>prod.config.js</code>：发布时独有的配置文件部分</li>
</ul>
<p>然后将原来的<code>webpack.config.js</code>配置文件中的内容按如上三个新建立的配置文件的功能进行粘贴。举例：</p>
<p><code>base.config.js</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">&#x27;webpack&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="attr">entry</span>: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">path</span>: path.resolve(__dirname, <span class="string">&#x27;../dist&#x27;</span>),</span><br><span class="line">    <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,</span><br><span class="line">    <span class="comment">// publicPath: &#x27;dist/&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        use: [ <span class="string">&#x27;style-loader&#x27;</span>, <span class="string">&#x27;css-loader&#x27;</span> ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [&#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&quot;style-loader&quot;</span>,</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&quot;css-loader&quot;</span>,</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&quot;less-loader&quot;</span>,</span><br><span class="line">        &#125;]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif|jpeg)$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">loader</span>: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">            <span class="attr">options</span>: &#123;</span><br><span class="line">              <span class="attr">limit</span>: <span class="number">8192</span>,</span><br><span class="line">              <span class="attr">name</span>: <span class="string">&#x27;img/[name].[hash:8].[ext]&#x27;</span></span><br><span class="line">            &#125;,</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        exclude: <span class="regexp">/(node_modules|bower_components)/</span>,</span><br><span class="line">        use: &#123;</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&#x27;babel-loader&#x27;</span>,</span><br><span class="line">          <span class="attr">options</span>: &#123;</span><br><span class="line">            <span class="attr">presets</span>: [<span class="string">&#x27;es2015&#x27;</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use: [<span class="string">&#x27;vue-loader&#x27;</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">resolve</span>: &#123;</span><br><span class="line">    <span class="attr">extensions</span>: [<span class="string">&#x27;.js&#x27;</span>, <span class="string">&#x27;.css&#x27;</span>, <span class="string">&#x27;.vue&#x27;</span>],</span><br><span class="line">    <span class="attr">alias</span>: &#123;</span><br><span class="line">      <span class="string">&#x27;vue$&#x27;</span>: <span class="string">&#x27;vue/dist/vue.esm.js&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> webpack.BannerPlugin(<span class="string">&#x27;最终版权归花猪所有&#x27;</span>),</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">      <span class="attr">template</span>: <span class="string">&#x27;index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>dev.config.js</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> baseConfig = <span class="built_in">require</span>(<span class="string">&#x27;./base.config.js&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = webpackMerge(baseConfig, &#123;</span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">contentBase</span>: <span class="string">&#x27;./dist&#x27;</span>,</span><br><span class="line">    <span class="attr">inline</span>: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><code>prod.config.js</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> UglifyjsWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> webpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> baseConfig = <span class="built_in">require</span>(<span class="string">&#x27;./base.config.js&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = webpackMerge(baseConfig, &#123;</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="keyword">new</span> UglifyjsWebpackPlugin()</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<p>在<code>dev.config.js</code>和<code>prod.config.js</code>需要先在首部导入<code>webpackMerge</code>：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpackMerge = <span class="built_in">require</span>(<span class="string">&#x27;webpack-merge&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>以及导入<code>base.config.js</code>文件：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> baseConfig = <span class="built_in">require</span>(<span class="string">&#x27;./base.config.js&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>然后按照上述格式将基本配置信息（baseConfig）和其他配置信息做结合。</p>
</blockquote>
<p>然后就可以删除原<code>webpack.config.js</code>配置文件了。</p>
<p>注意：</p>
<ul>
<li><p>在<code>base.config.js</code>文件中需要将<code>output</code>模块中的<code>path</code>信息做修改：</p>
<p><code>path: path.resolve(__dirname, &#39;../dist&#39;)</code></p>
<p>以将打包输出文件仍然在根目录下的<code>dist</code>文件夹中（注意原来可能是<code>&#39;./dist&#39;</code>，这样则会在<code>build</code>文件夹下新建一个<code>dist</code>输出文件夹）</p>
</li>
<li><p>在<code>package.json</code>中需要修改调试和打包命令（否则默认寻找<code>webpack.config.js</code>文件，会报错）</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;build&quot;</span>: <span class="string">&quot;webpack --config ./build/prod.config.js&quot;</span>,</span><br><span class="line"><span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack-dev-server --open --config ./build/dev.config.js&quot;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<p>如此，便可在不用修改配置的情况下键入<code>npm run dev</code>和<code>npm run build</code>正常进行启动本地服务和打包功能。</p>
<hr>
<h1 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h1><p>掌握了webpack的一些基本原理，对之后学习脚手架会更好理解。</p>

    </div>

    
    
    
      
  <div class="popular-posts-header">相关文章</div>
  <ul class="popular-posts">
    <li class="popular-posts-item">
      <div class="popular-posts-title"><a href="\next\2021\08\02\Vue\Vue学习笔记\" rel="bookmark">Vue学习笔记</a></div>
    </li>
    <li class="popular-posts-item">
      <div class="popular-posts-title"><a href="\next\2021\08\19\Vue\Vue学习-axios\" rel="bookmark">Vue学习-axios</a></div>
    </li>
    <li class="popular-posts-item">
      <div class="popular-posts-title"><a href="\next\2021\08\17\Vue\Vue学习-Vuex\" rel="bookmark">Vue学习-Vuex</a></div>
    </li>
    <li class="popular-posts-item">
      <div class="popular-posts-title"><a href="\next\2021\08\17\Vue\Vue学习-Promise\" rel="bookmark">Vue学习-Promise</a></div>
    </li>
    <li class="popular-posts-item">
      <div class="popular-posts-title"><a href="\next\2021\08\14\Vue\Vue学习-Vue-router\" rel="bookmark">Vue学习-Vue router</a></div>
    </li>
  </ul>


    <footer class="post-footer">
          <div class="reward-container">
  <div></div>
  <button>
    赞赏
  </button>
  <div class="post-reward">
      <div>
        <img src="https://cdn.jsdelivr.net/gh/CNhuazhu/Image/wechat.png" alt="花猪 微信">
        <span>微信</span>
      </div>
      <div>
        <img src="https://cdn.jsdelivr.net/gh/CNhuazhu/Image/alipay.jpg" alt="花猪 支付宝">
        <span>支付宝</span>
      </div>

  </div>
</div>

          <div class="post-tags">
              <a href="/next/tags/Vue/" rel="tag"><i class="fa fa-tag"></i> Vue</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/next/2021/08/08/Vue/Vue%E5%AD%A6%E4%B9%A0-ES6%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%E5%AE%9E%E7%8E%B0/" rel="prev" title="Vue学习-ES6的模块化实现">
                  <i class="fa fa-chevron-left"></i> Vue学习-ES6的模块化实现
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/next/2021/08/13/Vue/Vue%E5%AD%A6%E4%B9%A0-Vue-cli/" rel="next" title="Vue学习-Vue CLI">
                  Vue学习-Vue CLI <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments"><div id="twikoo-comments"></div></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">花猪</span>
</div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
      <span>站点总字数：</span>
    <span title="站点总字数">356k</span>
  </span>
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span>站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">5:23</span>
  </span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/mist/" rel="noopener" target="_blank">NexT.Mist</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@next-theme/pjax@0.5.0/pjax.min.js" integrity="sha256-3NkoLDrmHLTYj7csHIZSr0MHAFTXth7Ua/DDt4MRUAg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js" integrity="sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM=" crossorigin="anonymous"></script>
<script src="/next/js/comments.js"></script><script src="/next/js/utils.js"></script><script src="/next/js/motion.js"></script><script src="/next/js/schemes/muse.js"></script><script src="/next/js/next-boot.js"></script><script src="/next/js/pjax.js"></script>

  
<script src="/next/js/third-party/search/local-search.js"></script>




  


  <script class="next-config" data-name="leancloud_visitors" type="application/json">{"enable":true,"app_id":"dh8GVAcIwU1TN4zhA5y63iW1-gzGzoHsz","app_key":"hzyAqDKjG4OBGrdPS7mKaOa7","server_url":null,"security":true}</script>
  <script src="/next/js/third-party/statistics/lean-analytics.js"></script>


  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-mml-chtml.js","integrity":"sha256-r+3itOMtGGjap0x+10hu6jW/gZCzxHsoKrOd7gyRSGY="}}</script>
<script src="/next/js/third-party/math/mathjax.js"></script>


<script class="next-config" data-name="twikoo" type="application/json">{"enable":true,"visitor":true,"envId":"hexo-1g41404w9f800e94","el":"#twikoo-comments"}</script>
<script>
document.addEventListener('page:loaded', () => {
  NexT.utils.loadComments(CONFIG.twikoo.el)
    .then(() => NexT.utils.getScript(
      'https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js',
      { condition: window.twikoo }
    ))
    .then(() => {
      twikoo.init(CONFIG.twikoo);
    });
});
</script>

</body>
</html>
